<template>
	<div>
		<div class="Swiper">
			<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
				<van-swipe-item><img src="@/assets/banner.png" alt="" class="banner" /></van-swipe-item>
				<van-swipe-item><img src="@/assets/banner.png" alt="" class="banner" /></van-swipe-item>
			</van-swipe>
		</div>
		<div class="fenzu">
			<div class="fenzu_1">
				<div class="kuaidi">
					<van-icon name="point-gift" id="kuaidi_1"/>
					<p>寄快递</p>
					<p>1小时上门取件</p>
				</div>
				<div class="kuaidi">
					<van-icon name="enlarge" id="kuaidi_1"/>
					<p>寄快递</p>
					<p>1小时上门取件</p>
				</div>
				<div class="kuaidi">
					<van-icon name="map-marked" id="kuaidi_1"/>
					<p>寄快递</p>
					<p>1小时上门取件</p>
				</div>
				<div class="kuaidi">
					<van-icon name="bag" id="kuaidi_1"/>
					<p>寄快递</p>
					<p>1小时上门取件</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				active: 0
			};
		},
	};
</script>

<style>
	.Swiper {
		width: 450px;
		height: 200px;
		margin: 0 auto;
	}

	.banner {
		width: 100%;
	}

	.fenzu {
		width: 450px;
		height: 500px;
		margin: 0 auto;
	}

	.fenzu_1 {
		width: 100%;
		height: 350px;
		margin-top: 80px;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	.kuaidi {
		width: 45%;
		height: 150px;
		/* background-color: #0000FF; */
		display: flex;
		flex-direction: column;
		align-items: center;
		border:1px solid #000000;
	}
	#kuaidi_1{
		font-size: 50px;
	}
</style>
